<template>
  <div class="Tables">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        label="#"
        type="index"
        show-overflow-tooltip
        width="50"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="教练姓名"
        width="180"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="id_card"
        label="身份证号"
        align="center"
      ></el-table-column>
      <el-table-column prop="tel" label="手机号" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.tel">
            <!-- {{
              scope.row.tel.substring(0, 3) +
              '****' +
              scope.row.tel.substring(8, 11)
            }} -->
            {{scope.row.tel}}
          </span>
          <span v-else>无</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="driver_age"
        label="教龄"
        align="center"
      ></el-table-column>

       <el-table-column prop="teach_models" label="准教车型" align="center" show-overflow-tooltip width="94">
        <template slot-scope="scope">
          <span v-for="(item, index) in scope.row.teach_models.title">
               <span v-if="index!=0">{{','}}</span>
               <span>{{item}}</span>
           </span>
          <!-- <el-tooltip class="item" effect="dark" placement="top">
            <div slot="content" class="zzyqshowtag">
              <span
                v-for="(item, index) in scope.row.teach_models.title"
                :key="index"
              >
                {{ item }}
              </span>
            </div>
            <span>{{ scope.row.teach_models.title[0] }}</span>
          </el-tooltip> -->

        </template>
      </el-table-column>
      <el-table-column prop="teach_subjects" label="教学科目" align="center">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" placement="top">
            <div slot="content" class="zzyqshowtag">
              <span
                v-for="(item, index) in scope.row.teach_subjects.title"
                :key="index"
              >
                {{ item }}
              </span>
            </div>
            <span class="cu">{{ scope.row.teach_subjects.title[0] }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="train_place_two"
        label="科目二训练场"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.train_place_two.title">{{ scope.row.train_place_two.title }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>


      <el-table-column
        prop="cars_id"
        label="关联车辆"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.cars_id.title">{{ scope.row.cars_id.title }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" align="center" v-if="checkPermission(['coachEdit','coachDelete'])">
        <template slot-scope="scope">
          <span class="edittext" v-if="checkPermission(['coachEdit'])" @click="editform(scope.row.id)">编辑</span>
          <span class="edittext" v-if="checkPermission(['coachDelete'])" @click="deleteitem(scope.row.id)">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="24" class="pagination">
        <!-- 翻页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pages.page"
          :page-sizes="[10, 20, 30]"
          :page-size="10"
          background
          layout="total, sizes, prev, pager, next"
          :total="pages.total"
        ></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
//按钮权限验证
import checkPermission from "@/utils/permission";
export default {
  data() {
    return {
      //表格数据
      tableData: [],
      //页码数据
      pages: {},
    }
  },
  props: {
    //表格数据
    tabData: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  watch: {
    tabData(val) {
      this.tableData = val.list
      this.pages = val.page
    },
  },
  methods: {
	//权限验证
	checkPermission,
    handleSizeChange(val) {
       this.$emit('changepageTotal',val)
    },
    handleCurrentChange(val) {
       this.$emit('changepage',val)
    },
    //编辑
    editform(id) {
      let params = {
        id,
        type:1
      }
      //显示dialog通知父组件打开弹窗
      this.$emit('openedit',params)
    },
    //删除
    deleteitem(id) {
      this.$emit('deleteitem',id)
    },
  },
}
</script>

<style scoped lang='scss'>
.Tables {
  margin-top: 25px;
}
.edittext {
  margin: 0 10px;
  color: #4c68ef;
  cursor: pointer;
}
.pagination {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>
